<template>
    <div>
        <el-row :gutter="24">
            <el-col :md="3" :sm="6">{{ $t('channel name') }}</el-col>
            <el-col :md="4" :sm="6">{{ $t('codec') }}</el-col>
            <el-col :md="4" :sm="6">{{ $t('source') }}</el-col>
            <el-col :md="4" :sm="6">{{ $t('gain') }}</el-col>
            <el-col :md="3" :sm="6">{{ $t('samplerate') }}</el-col>
            <el-col :md="3" :sm="6">{{ $t('channels') }}</el-col>
            <el-col :md="3" :sm="6">{{ $t('bitrate') }}(kb/s)</el-col>
        </el-row>
        <div v-for="(data, index) in dataList">
            <el-divider></el-divider>
            <el-row :gutter="24" style="margin-top:16px">
                <el-col :md="3" :sm="6">
                    <el-input v-model="data.name" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>

                <el-col :md="4" :sm="6">
                    <el-select v-model="data.enca.codec" :placeholder="$t('select_placeholder')" style="width: 100%;">
                        <el-option v-for="item in audioCodecOptions" :key="item.value" :label="item.label"
                            :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-col>
                <el-col :md="4" :sm="6">
                    <el-select v-model="data.enca.audioSrc" :placeholder="$t('select_placeholder')" style="width: 100%;">
                        <el-option v-for="item in audioSourceOptions" :key="item.value" :label="item.label"
                            :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-col>
                <el-col :md="4" :sm="6">
                    <el-select v-model="data.enca.gain" :placeholder="$t('select_placeholder')" style="width: 100%;">
                        <el-option v-for="item in gainOptions" :key="item.value" :label="item.label" :value="item.value"
                            :disabled="item.disabled"></el-option>
                    </el-select>
                </el-col>
                <el-col :md="3" :sm="6">
                    <el-select v-model="data.enca.samplerate" :placeholder="$t('select_placeholder')" style="width: 100%;">
                        <el-option v-for="item in samplerateOptions" :key="item.value" :label="item.label"
                            :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-col>

                <el-col :md="3" :sm="6">
                    <el-select v-model="data.enca.channels" :placeholder="$t('select_placeholder')" style="width: 100%;">
                        <el-option :label="$t('mono')" :value="1"></el-option>
                        <el-option :label="$t('stereo')" :value="2"></el-option>
                    </el-select>
                </el-col>
                <el-col :md="3" :sm="6">
                    <el-input v-model="data.enca.bitrate" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
  
<script setup name="video-stream">
const props = defineProps(['data', 'audioSourceOptions', 'audioCodecOptions', 'gainOptions', 'samplerateOptions'])
let audioSourceOptions = ref([])
let audioCodecOptions = ref([])
let gainOptions = ref([])
let samplerateOptions = ref([])
let dataList = ref([])
watchEffect(() => {
    audioSourceOptions.value = props.audioSourceOptions
    audioCodecOptions.value = props.audioCodecOptions
    gainOptions.value = props.gainOptions
    samplerateOptions.value = props.samplerateOptions

    dataList.value = props.data
})

onUnmounted(() => {

});

</script>
  
<style scoped lang="scss">
.encode-setting {}
</style>
  
  